<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代理配置调试工具</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 10px;
        }
        .test-section {
            margin-bottom: 25px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .test-section h3 {
            margin-top: 0;
            color: #4CAF50;
        }
        button {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            font-size: 14px;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 15px;
            padding: 15px;
            background-color: white;
            border-radius: 4px;
            border: 1px solid #eee;
            max-height: 300px;
            overflow-y: auto;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 13px;
        }
        .error {
            background-color: #ffebee;
            color: #c62828;
            border-color: #ffcdd2;
        }
        .success {
            background-color: #e8f5e9;
            color: #2e7d32;
            border-color: #c8e6c9;
        }
        .info {
            background-color: #e3f2fd;
            color: #1565c0;
            border-color: #bbdefb;
        }
        .test-summary {
            margin-top: 30px;
            padding: 15px;
            background-color: #fff3e0;
            border-left: 4px solid #ff9800;
        }
        .test-url {
            font-family: monospace;
            background-color: #f5f5f5;
            padding: 2px 5px;
            border-radius: 3px;
        }
        .config-info {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #e8f5e9;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>API代理配置调试工具</h1>
    
    <div class="config-info">
        <h3>当前配置信息</h3>
        <p><strong>前端开发服务器:</strong> http://localhost:5173</p>
        <p><strong>后端服务器:</strong> http://localhost:8000</p>
        <p><strong>代理规则:</strong> /api 前缀被代理到后端</p>
    </div>
    
    <div class="test-section">
        <h3>测试1: 基础API路径 (/api/projects/projects/)</h3>
        <p>测试获取项目列表的API，这个API应该在前端页面中正常使用</p>
        <button onclick="testAPI('/api/projects/projects/', 'basic-api-result')">发送请求</button>
        <div id="basic-api-result" class="result">点击按钮开始测试...</div>
    </div>
    
    <div class="test-section">
        <h3>测试2: AI服务API路径 (/api/ai/ai-services/)</h3>
        <p>测试AI服务相关API的基础路径</p>
        <button onclick="testAPI('/api/ai/ai-services/', 'ai-service-result')">发送请求</button>
        <div id="ai-service-result" class="result">点击按钮开始测试...</div>
    </div>
    
    <div class="test-section">
        <h3>测试3: 生成测试用例API路径 (/api/ai/ai-services/generate-test-cases/)</h3>
        <p>测试具体的测试用例生成API路径（GET方法，实际使用时为POST）</p>
        <button onclick="testAPI('/api/ai/ai-services/generate-test-cases/', 'generate-cases-result')">发送请求</button>
        <div id="generate-cases-result" class="result">点击按钮开始测试...</div>
    </div>
    
    <div class="test-section">
        <h3>测试4: 直接访问后端API</h3>
        <p>不通过代理直接访问后端API，用于验证后端服务是否正常</p>
        <button onclick="testAPI('http://localhost:8000/projects/projects/', 'direct-api-result', false)">发送请求</button>
        <div id="direct-api-result" class="result">点击按钮开始测试...</div>
    </div>
    
    <div class="test-summary" id="summary">
        <h3>测试总结</h3>
        <p>请先运行上面的测试，然后查看测试结果分析...</p>
    </div>
    
    <script>
        // 记录测试结果
        const testResults = {
            proxyWorks: null,
            directWorks: null,
            specificEndpoints: {}
        };
        
        // 测试指定的API路径
        function testAPI(url, resultId, useProxy = true) {
            const resultDiv = document.getElementById(resultId);
            resultDiv.textContent = '正在发送请求到 ' + url + '...';
            resultDiv.className = 'result info';
            
            // 设置请求配置
            const config = {
                method: 'GET',
                url: url,
                timeout: 10000,
                withCredentials: true
            };
            
            // 记录开始时间
            const startTime = new Date().getTime();
            
            axios(config)
                .then(response => {
                    const endTime = new Date().getTime();
                    const responseTime = endTime - startTime;
                    
                    resultDiv.textContent = `请求成功！ (响应时间: ${responseTime}ms)\n\n状态码: ${response.status}\n\n响应头:\n${JSON.stringify(response.headers, null, 2)}\n\n响应数据: (前1000字符)\n${JSON.stringify(response.data, null, 2).substring(0, 1000)}`;
                    resultDiv.className = 'result success';
                    
                    // 更新测试结果
                    if (useProxy && url.startsWith('/api/')) {
                        if (url.includes('/api/projects/')) {
                            testResults.proxyWorks = true;
                        } else if (url.includes('/api/ai/')) {
                            testResults.specificEndpoints[url] = true;
                        }
                    } else if (!useProxy && url.startsWith('http://localhost:8000/')) {
                        testResults.directWorks = true;
                    }
                    
                    updateSummary();
                })
                .catch(error => {
                    const endTime = new Date().getTime();
                    const responseTime = endTime - startTime;
                    
                    let errorMsg = `请求失败！ (响应时间: ${responseTime}ms)\n\n错误信息: ${error.message}`;
                    
                    if (error.response) {
                        errorMsg += `\n\n状态码: ${error.response.status}`;
                        errorMsg += `\n响应头:\n${JSON.stringify(error.response.headers, null, 2)}`;
                        errorMsg += `\n响应数据:\n${JSON.stringify(error.response.data, null, 2)}`;
                    } else if (error.request) {
                        errorMsg += '\n\n没有收到响应，请检查后端服务是否正常运行。';
                    }
                    
                    resultDiv.textContent = errorMsg;
                    resultDiv.className = 'result error';
                    
                    // 更新测试结果
                    if (useProxy && url.startsWith('/api/')) {
                        if (url.includes('/api/projects/')) {
                            testResults.proxyWorks = false;
                        } else if (url.includes('/api/ai/')) {
                            testResults.specificEndpoints[url] = false;
                        }
                    } else if (!useProxy && url.startsWith('http://localhost:8000/')) {
                        testResults.directWorks = false;
                    }
                    
                    updateSummary();
                });
        }
        
        // 更新测试总结
        function updateSummary() {
            const summaryDiv = document.getElementById('summary');
            let summary = '<h3>测试总结</h3>';
            
            // 分析代理是否正常工作
            if (testResults.directWorks === true) {
                summary += '<p style="color: green;">✅ 后端服务运行正常，可以直接访问。</p>';
            } else if (testResults.directWorks === false) {
                summary += '<p style="color: red;">❌ 无法直接访问后端服务，请检查后端服务是否运行。</p>';
                summary += '<p>可能的解决方法：</p><ul><li>确保后端服务已启动（python manage.py runserver）</li><li>检查防火墙设置</li></ul>';
                summaryDiv.innerHTML = summary;
                return;
            }
            
            if (testResults.proxyWorks === true) {
                summary += '<p style="color: green;">✅ API代理基础功能正常工作。</p>';
            } else if (testResults.proxyWorks === false) {
                summary += '<p style="color: red;">❌ API代理基础功能不工作。</p>';
                summary += '<p>可能的解决方法：</p><ul><li>检查vite.config.ts中的代理配置</li><li>确保target设置为正确的后端地址</li><li>验证rewrite规则是否正确</li></ul>';
                summaryDiv.innerHTML = summary;
                return;
            }
            
            // 分析特定端点
            const aiEndpoints = Object.keys(testResults.specificEndpoints);
            if (aiEndpoints.length > 0) {
                let allAIApiWorks = true;
                
                aiEndpoints.forEach(endpoint => {
                    if (testResults.specificEndpoints[endpoint] === false) {
                        allAIApiWorks = false;
                        summary += `<p style="color: red;">❌ 特定API端点 ${endpoint} 访问失败。</p>`;
                    }
                });
                
                if (allAIApiWorks) {
                    summary += '<p style="color: green;">✅ 所有测试的AI相关API端点都可以正常访问。</p>';
                    summary += '<p>代理配置看起来正常工作！如果前端应用中仍有问题，可能需要检查：</p>';
                    summary += '<ul>';
                    summary += '<li>前端代码中的API请求路径是否正确</li>';
                    summary += '<li>请求方法是否匹配（GET vs POST）</li>';
                    summary += '<li>请求参数和数据格式</li>';
                    summary += '<li>请求是否被CORS策略阻止</li>';
                    summary += '</ul>';
                } else {
                    summary += '<p>可能的解决方法：</p>';
                    summary += '<ul>';
                    summary += '<li>检查后端是否正确注册了这些API端点</li>';
                    summary += '<li>验证URL路径大小写是否匹配</li>';
                    summary += '<li>查看后端服务器日志是否有相关错误</li>';
                    summary += '</ul>';
                }
            }
            
            summaryDiv.innerHTML = summary;
        }
        
        // 页面加载完成后自动执行基础测试
        window.onload = function() {
            setTimeout(() => {
                // 只自动执行基础测试，避免过多请求
                testAPI('/api/projects/projects/', 'basic-api-result');
            }, 1000);
        };
    </script>
</body>
</html>